<%@include file="/commons/decelerations.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>List Of Persons</title>
<!--
<script type="text/javascript" src='<c:url value="/scripts/jquery.js"></c:url>'></script>
<script type="text/javascript" src='<c:url value="/scripts/jquery.autocomplete.js"></c:url>'></script>
<script type="text/javascript" src='<c:url value="/scripts/localdata.js"></c:url>'></script>
<link rel="stylesheet" type="text/css" href="../css/jquery.autocomplete.css" />
-->
<link type="text/css" href="../css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="Stylesheet" />
<script type="text/javascript" src='<c:url value="/js/jquery-ui-1.10.3.custom.js"></c:url>'></script>

<!-------------------------------------------------------------------------- -->
<script type="text/javascript">
	var request_sreach = new createAJAX_sreach();
	if (request_sreach == null)
		alert("無法產生 request 物件:您不能正常使用本網頁");
	//依據不同的瀏覽器，取得 XMLHttpRequest 物件
	function createAJAX_sreach() {
		try {
			var request_sreach = new XMLHttpRequest();
			return request_sreach;
		} catch (erri) {
			try {
				var arrSignatures = [ "MSXML2.XMLHTTP.5.0",
						"MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0",
						"MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
				for ( var i = 0; i < arrSignatures.length; i++) {
					try {
						var request_sreach = new ActiveXObject(arrSignatures[i]);
						return request_sreach;
					} catch (oError) {
						//ignore
					}
				}
			} catch (errii) {
				//ignore
			}
		}
	}

	/*check used*/
	function safe_tags_sreach(str) {
		return "以下為ajax傳回的 HTML 原始碼<p>"
				+ str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(
						/>/g, '&gt;');
	}
	/*change web*/
	function changeDIV_sreach() {
		if (request_sreach.readyState == 4) {
			if (request_sreach.status == 200 || request_sreach.status == 0) {
				var reqTxt = request_sreach.responseText;
				var source = safe_tags_sreach(reqTxt);
				document.getElementById("ListPerson").innerHTML = reqTxt;
			} else
				alert("Sreach Error! Request status is " + request_sreach.status);
		}
	}
	/*get web to servlet*/
	function startRunAJAX_sreach() {
		request_sreach = new createAJAX_sreach();
		request_sreach.onreadystatechange = changeDIV_sreach;
		request_sreach.open("POST", "${pageContext.request.contextPath}" + "/person/SreachPerson", true);
		request_sreach.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		sendAllFormField_sreach();
	}

	function sendAllFormField_sreach() {
		var sParams = "";

		for (i = 0; i < document.ListPerson.length; i++) {
			var fName = document.ListPerson[i].name;
			var fValue = document.ListPerson[i].value;
			if (document.ListPerson[i].type == "checkbox") {
				if (document.ListPerson[i].checked) {
					sParams = addPostParam_sreach(sParams, fName, fValue);
				}
			} else if (document.ListPerson[i].type == "radio") {
				if (document.ListPerson[i].checked) {
					sParams = addPostParam_sreach(sParams, fName, fValue);
				}
			} else if (document.ListPerson[i].type == "image") {
				sParams = addPostParam_sreach(sParams, fName, fValue);
			} else {
				sParams = addPostParam_sreach(sParams, fName, fValue);
			}
		}
		request_sreach.send(sParams);
		return sParams;
	}

	function addPostParam_sreach(sParams, sParamName, sParamValue) {
		if (sParams.length > 0) {
			sParams += "&";
		}
		return sParams + encodeURIComponent(sParamName) + "="
				+ encodeURIComponent(sParamValue);
	}
</script>
<!-- --------------------------------------------------------------------------------------- -->
<!-- --------------------------------------------------------------------------------------- -->
<!-- --------------------------------------------------------------------------------------- -->
<script type="text/javascript">
	$(function() {
		//顯示全部
		$('#showall').click(function() {
			//顯示所有tr
			$("tr").each(function() {
				$(this).show();
			});
			//顯示所有td
			$("td").each(function() {$(this).show();});
			//顯示所有th
			$("th").each(function() {
				$(this).show();
			});
		});
		//隱藏指定Row或Column
		$('td').click(
				function() {
					//var typeindex = $("#type").attr("selectedIndex");  
					var typeindex = $("#type").val();
					var colindex = $(this).parent().children().index($(this));
					var rowindex = $(this).parent().parent().children().index($(this).parent());
					if (typeindex != 0){
						//alert('col:' + colindex);
						$('td:nth-child(' + (colindex + 1) + ')').hide();
						$('th:nth-child(' + (colindex + 1) + ')').hide();
						//隱藏column
						//$('td:eq('+colindex+')').hide();
						//隱藏cell 
					}
					else{
						//alert('row:' + rowindex);
						$('tr:eq(' + rowindex + ')').hide(); //隱藏row
					}

				});

	});
</script>
<!-- --------------------------------------------------------------------------------------- -->
<!-- --------------------------------------------------------------------------------------- -->
<!-- --------------------------------------------------------------------------------------- -->


</head>
<body>
<form name="ListPerson" id="ListPerson" method="post" >
	<h1>List of Persons currently in Database</h1>
		Enter the word you want to sreach about:<br /> 
		<input type="text" id="sreachKey" name="sreachKey" /> 
		<input type="button" value="Sreach" onclick="startRunAJAX_sreach()" /> value：<input type="text" id="txtSelectValue" /> <br/>
<!-- autocomplete----------------------------------------------------- -->
<script type="text/javascript">
$("#txtSelectValue").autocomplete({
	source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
	});
</script>
<!-- autocomplete END----------------------------------------------------- -->
	<select id="type" style="width:auto">
		<option value="0">hidden row</option>
		<option value="1">hidden column</option>
	</select>&nbsp;&nbsp;
	<input type="button" id="showall" value="Show hidden">&nbsp;
	<table id="personListTable" name="personListTable" border="3">
		<tr>
			<th>Person ID</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Role Id</th>
			<th>Do Delete</th>
		</tr>
		<c:forEach var="person" begin="0" items="${requestScope.personList}">
			<tr><!-- MaintainPerson?personId=${person.personId} -->
				<td><a href="<c:url value='/person/MaintainPerson?personId=${person.personId}'></c:url>">${person.personId}</a>&nbsp;&nbsp;</td>
				<td>${person.firstName}&nbsp;&nbsp;</td>
				<td>${person.lastName}&nbsp;&nbsp;</td>
				<td><c:forEach var="role" items="${person.roles}"
						varStatus="roleStatus">
						<c:if test="${!roleStatus.first}">,</c:if>
    	${role.roleId}
    </c:forEach></td>
				<td><a href="<c:url value='/person/DeletePerson?personId=${person.personId}'></c:url>">Delete</a></td>
			</tr>
		</c:forEach>

	</table>
	<a href="<c:url value='/person/CreatePerson'></c:url>"><strong>Create a Person Record</strong></a>
	<br />
	<a href="<c:url value='/index.jsp'></c:url>">Back to Index page</a>&nbsp;&nbsp;
	<c:if test="${requestScope.sreach eq 'sreach'}">
		<a href="<c:url value='/person/ListPerson'></c:url>">Back to all list</a>
	</c:if>
</form>
</body>
</html>
